<!DOCTYPE html>
<html lang="ZH-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo_成绩表案例</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .table{
        width: 1000px;
    }
    table{
        text-align: center;
        width: 100%;
        border: 0px;
        line-height: 30px;
    }
    thead{
        background-color: aqua;
        border: 0px;
    }
    tbody,tfoot{
        background-color: antiquewhite;
        border: 0px;
    }
    tr{}
    td{
        border: 0;
        border-radius: 5px;
        inset-inline: 10px;
    }
    .red{
        color: rgb(255, 0, 0);
    }
    a{}
    input:focus{
        outline: none;
    }
    .ta{
        display: table;
    }
    .ta_cell{
        display: table-cell;
    }
    input{
        padding: 5px;
        border: 0;
        border-bottom: 1px solid;
        background-color: beige;
    }
    span {
    margin-left: 10px;
}
.a1{
    margin: 0 auto;
    padding: 5px;
    background-color: beige;
    border-radius: 10px;
    margin-top: 10px;
    display: table-cell;
    /* height: 136px; */
}
.a2{
    padding: 5px;
    border: 0px;
    border-radius: 10px;
    line-height: 27.5px;
    width: 120px;
}
.submit{
    transition: background-color .2s ease;
}
.submit:hover{
    background-color: rgb(173, 216, 230);
    cursor: pointer;
}

</style>
<body>
    <div id="app" class="score_case" style="
    display: table;
">
            <div class="table">
                <table>
                    <thead>
                        <tr>
                            <td>编号</td>
                            <td>科目</td>
                            <td>成绩</td>
                            <td>操作</td>
                        </tr>
                    </thead>
                    <tbody v-if="(list.length>0)" >
                        <tr v-for="(item,index) in list">
                            <td>{{ index+1 }}</td>
                            <td>{{ item.subject }}</td>
                            <!-- <td :class="item.score<60?'red':''">{{ item.score }}</td> -->
                            <td :class={red:item.score<60}>{{ item.score }}</td>
                            <td><a href="javascript:;" @click="del(item.id)">删除</a></td>
                        </tr>
                    </tbody>
                    <tbody v-else>
                        <tr style="height: 100px; line-height: 100px;">
                            <td colspan="4">
                                <span>暂无数据</span>
                            </td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="4">
                                <span>{{ list.length }}条记录</span>
                                <span>总分:{{ sum  }}</span>
                                <span>平均分：{{ arg }}</span>
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </div>
            <div class="form ta a1">
                <div class="form-item ta">
                    <div class="label ta_cell" style="line-height: 26.5px;">科目：</div>
                    <div class="input ta_cell">
                        <input type="text" placeholder="请输入科目" v-model="subject">
                    </div>
                </div>
                <div class="form-item ta" style="line-height: 26.5px;">
                    <div class="label ta_cell">分数：</div>
                    <div class="input ta_cell">
                        <input type="text" placeholder="请输入分数" v-model="score">
                    </div>
                </div>
                <div class="form-item ta" style="margin: 0 auto;padding-top: 10px;">
                    <div class="input" style="margin: 0 auto;">
                        <button class="submit a2" @click="add()">添加</button>
                    </div>
                </div>
            </div>
        </div>
<!-- <script src="D:\桌面\项目开发文档及源码\前端开发项目文档\Vue\vue.js"></script> -->
<!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app =new Vue ({
        el:'#app',
        data:{
            list:[
                {id:1,subject:'英文',score:20},
                {id:2,subject:'语文',score:99},
                {id:3,subject:'数学',score:70}
            ],
            // mssage:"456",
            subject:'',
            score:''
        },
        computed:{
            sum(){
                return this.list.reduce((sum,item)=>sum+item.score,0)
            },
            arg(){
                if(this.list.length===0){
                    return 0
                }else {
                    return this.sum / this.list.length.toFixed(2)
                }
                
            }
        },
        methods:{
            del(id){
                console.log(id);
                this.list=this.list.filter(item=>item.id!==id)
            },
            add(){
                // console.log(this.subject,this.score);
                // if(this.subject==''||this.score==''){
                //     alert("输入不能为空")
                // }else{
                //     this.list.push({id:this.list.length+1,subject:this.subject,score:this.score})
                //     this.subject=''
                //     this.score=''
                // }
                if(this.subject==''||this.score==''){
                    alert("输入不能为空")
                }else{
                    this.list.unshift({
                        id:+new Date(),
                        subject:this.subject,
                        score:this.score
                    })
                }
            }
        }
    })
</script>
</body>
</html>